*{
	padding: 0;
	margin: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: bottom;
	background: transparent;
	font: 16px/150% Arial,'微软雅黑',"\5b8b\4f53";
	-webkit-font-smoothing: antialiased;
}
.clear-fix:after{
	content: '';
	display: block;
	clear: both;
}
a{
	transition: all 150ms ease-in;
	text-decoration: none;
}
body,html{
	background-color: #eeeeee;
}
.page-wrapper{
	height: 100%;
}
aside {
	position: fixed;
	z-index: 100;
	background: #202021;
	background: linear-gradient(135deg,#2c2e2c 0,#202021 100%);
	top: 0;
	bottom: 0;
	left: 0;
	width: 250px;
	text-align: left;
}

@media screen and (max-width: 770px){
	aside{
		bottom: auto;
		right: 0;
		width: 100%;
		height: 50px;
	}
}
.page-wrapper aside .myname{
	display: block;
	padding: 10px 30px 0px 30px;
	margin: 10px;
	color: #61c191;
	font-size: 40px;
	text-align: center;
}
.page-wrapper aside .myname:hover{
	color: #529a76;
}
.page-wrapper aside .nav{
	margin: 10px 30px;
}
aside .nav li{
	padding: 10px;
	display: block;
	font-size: 18px;
}
aside .nav li a{
	font-size: inherit;
	display: block;
	color: #fff;
}
aside .nav li a.selected{
	color: #f9c427;
}
aside .nav li a:hover{
	color: #2bb0d4;
}
@media screen and (min-width: 770px){
	.page-wrapper aside .headimg{
		width: 50%;
		margin: 30px auto 0px auto;
		border-radius: 50%;
		overflow: hidden;
	}
	.page-wrapper aside .headimg img{
		width: 100%;
	}
	.nav li:nth-child(1):before{
		content: '01'
	}
	.nav li:nth-child(2):before{
		content: '02'
	}
	.nav li:nth-child(3):before{
		content: '03'
	}
	.nav li:nth-child(4):before{
		content: '04'
	}

	.nav li:before {
		float: left;
		color: #999;
		font-size: 14px;
		margin: 2px 5px 0 0;
	}
}
#footer{
	position: absolute;
	padding-left: 30px;
	margin-left: 10px;
	bottom: 0;
}
footer .logo{
	margin-bottom: 20px;
}
footer .logo a{
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	background: #414141;
	color: #d9d9d9;
	font-size: 24px;
	text-align: center;
	line-height: 40px;
}
footer .logo .r-youxiang{
	background-color: rgb(0, 171,108);
	color: #fff;
	opacity: 0.5;
}
footer .logo .r-shu{
	background-color: rgb(88,70,19);
	color: #fff;
	opacity: 0.5;
}
footer .logo .r-github{
	background-color: #fff;
	color: #000;
	opacity: 0.5;
}
footer .logo .r-weibo{
	background-color: rgb(150,14,14);
	color: #fff;
	opacity: 0.5;
}
footer .logo a:hover{
	opacity: 1;
}
footer .source{
	font-size: 14px;
	color: #999;
	margin-bottom: 10px;
}
footer .source span.right{
	font-size: 14px;
	color: #999;
}
footer .source a{
	font-size: 14px;
	color: #999;
	margin: 0;
	text-decoration: underline;
}
@media screen and (max-width: 770px){
	.page-wrapper aside .headimg{
		display: inline-block;
		width: 44px;
		height: 44px;
		border-radius: 22px;
		overflow: hidden;
		margin-left: 20px;
		position: relative;
		top: -3px;
	}
	.page-wrapper aside .headimg img{
		width: 100%;
	}
	.page-wrapper aside .myname{
		display: inline-block;
		font-size: 24px;
		line-height: 50px;
		padding: 0;
		margin: 0 0 0 20px;
	}
	aside .menu{
		float: right;
		position: relative;
		z-index: 1;
		padding: 13px 30px;
		display: inline-block;
		cursor: pointer;
		vertical-align: middle;
		transition-property: opacity,-webkit-filter;
		transition-property: opacity,filter;
		transition-property: opacity,filter,-webkit-filter;
		transition-duration: .15s;
		transition-timing-function: linear;
	}
	.menu .menubox{
		width: 30px;
		height: 24px;
		position: relative;
	}
	.menubox .menuinner{
		transition-duration: .3s;
		transition-timing-function: cubic-bezier(0.55,0.055,0.675,0.19);
		top: 50%;
		margin-top: -2px;
	}
	.menuinner,.menuinner::before,.menuinner::after{
		width: 30px;
		height: 3px;
		background-color: #fff;
		border-radius: 3px;
		position: absolute;
		transition-property: -webkit-transform;
		transition-property: transform;
		transition-property: transform,-webkit-transform;
		transition-duration: .15s;
		transition-timing-function: ease;
	}
	.menuinner::before{
		top: -8px;
		transition: top .1s .34s ease-in,opacity .1s ease-in;
	}
	.menuinner::after{
		transition: bottom .1s .34s ease-in,-webkit-transform .3s cubic-bezier(0.55,0.055,0.675,0.19);
		transition: bottom .1s .34s ease-in,transform .3s cubic-bezier(0.55,0.055,0.675,0.19);
		transition: bottom .1s .34s ease-in,transform .3s cubic-bezier(0.55,0.055,0.675,0.19),-webkit-transform .3s cubic-bezier(0.55,0.055,0.675,0.19);
		bottom: -8px;
	}
	.menuinner::before,.menuinner::after{
		content: "";
		display: block;
	}
	.active .menubox .menuinner{
		-webkit-transform: rotate(225deg);
		transform: rotate(225deg);
		transition-delay: .14s;
		transition-timing-function: cubic-bezier(0.215,0.61,0.355,1);
	}
	.active .menuinner::before{
		top: 0;
		opacity: 0;
		transition: top .1s ease-out,opacity .1s .14s ease-out;
	}
	.active .menuinner::after{
		bottom: 0;
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
		transition: bottom .1s ease-out,-webkit-transform .3s .14s cubic-bezier(0.215,0.61,0.355,1);
		transition: bottom .1s ease-out,transform .3s .14s cubic-bezier(0.215,0.61,0.355,1);
		transition: bottom .1s ease-out,transform .3s .14s cubic-bezier(0.215,0.61,0.355,1),-webkit-transform .3s .14s cubic-bezier(0.215,0.61,0.355,1);
	}
	footer{
		position: fixed;
		top: 50px;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.9);
		opacity: 0;
		visibility: hidden;
		transition: all 150ms ease-in;
	}
	.active footer{
		opacity: 1;
		visibility: visible;
	}
}